<template>
    <div class="dscn-toolbar">
        <div class="dscn-container">
            <div class="header-logo">
                <span @click="toHome"><span class="header-logo-D"><i>D</i></span><i>SCN</i></span>
                <!--<svg-icon icon="iconwangdian" size="140" color="red"/>-->
            </div>
            <div class="ul-div">
                <ul class="dscn-toolbar-list">
                    <li>博客</li>
                    <li>下载</li>
                    <li>论坛</li>
                    <li>问答</li>
                    <li>APP</li>
                </ul>
            </div>
            <div class="search-div">
                <a-input-search class="input-search" placeholder="search blog" style="width: 200px" @search="onSearch"/>
                <!--<a-button class="search-create-btn" type="danger"></a-button>-->
                <a-dropdown>
                    <a-menu slot="overlay">
                        <a-menu-item class="blog-dropdown" @click="onWriteBlog" key="1">写博客</a-menu-item>
                    </a-menu>
                    <a-button class="search-create-btn" @click="toBlogCreateCenter" type="danger">创作中心</a-button>
                </a-dropdown>
                <a-icon class="icon-star" type="star" theme="filled"/>
                <a-icon type="bell" class="icon-message" theme="filled"/>
                <a-popover v-if="user.id != null" class="avatar-popover" trigger="hover">
                    <template slot="content">
                        <ul class="avatar-hover-ul">
                            <li @click="toUserCenter">
                                <svg-icon icon="icongerenzhongxin-zhong1" style="margin-right: 10px;"
                                          color="rgb(153,154,170)" size="14"/>
                                <a style="color: rgb(153,154,170)" href="#">个人中心</a>
                            </li>
                            <li>
                                <svg-icon icon="iconwodeguanzhu3" style="margin-right: 10px;" color="rgb(153,154,170)"
                                          size="14"/>
                                <a style="color: rgb(153,154,170)" href="#">我的关注</a>
                            </li>
                            <li>
                                <svg-icon icon="iconshoucang5" style="margin-right: 10px;" color="rgb(153,154,170)"
                                          size="14"/>
                                <a style="color: rgb(153,154,170)" href="#">我的收藏</a>
                            </li>
                            <li @click="toBlogCreateCenter">
                                <svg-icon icon="iconboke1" style="margin-right: 10px;" color="rgb(153,154,170)"
                                          size="14"/>
                                <a style="color: rgb(153,154,170)" href="#">博客中心</a>
                            </li>
                            <li>
                                <svg-icon icon="iconshezhi2" style="margin-right: 10px;" color="rgb(153,154,170)"
                                          size="14"/>
                                <a style="color: rgb(153,154,170)" href="#">博客设置</a>
                            </li>
                            <li @click="logOut">
                                <svg-icon icon="icontuichu2" style="margin-right: 10px;" color="rgb(153,154,170)"
                                          size="14"/>
                                <a style="color: rgb(153,154,170)" href="#">退出登录</a>
                            </li>
                        </ul>
                    </template>
                    <a-avatar class="avatar" :src="avatarUrl"/>
                </a-popover>
                <a-button class="login-btn" @click="toLogin" v-else style="border: none" type="primary" ghost>注册/登录
                </a-button>
                <!--<div class="avatar">
                    <img src="" alt="个人头像">
                </div>-->
            </div>
        </div>
    </div>
</template>

<script>
    import {getUserInfo} from "@/api/user/userInfo";

    export default {
        name: "my-header",
        data() {
            return {
                avatarUrl: ''
            };
        },
        computed: {
            user() {
                return this.$store.state.user;
            }
        },
        /*mounted() {
          this.$store.commit('UPDATE_USER', {
              id: '0000000000000000000000'
          })
        },*/
        mounted() {
            this.init();
        },
        methods: {
            onSearch() {

            },
            /* 跳转至书写博客的md编辑器 */
            onWriteBlog() {
                this.$router.push('/writeBlogMd')
            },
            /* 跳转至创作中心 */
            toBlogCreateCenter() {
                this.$router.push('/blogCreateCenter/blogHome')
            },
            /* 返回首页 */
            toHome() {
                this.$router.push('/')
            },
            /* 跳转至登录页面 */
            toLogin() {
                this.$router.push('/login')
            },
            toUserCenter() {
                this.$router.push('/userCenter/personalInformation')
            },
            logOut() {
                this.$store.commit('UPDATE_USER', {
                    id: null
                })
                this.$store.commit('UPDATE_USER_INFO', null)
                this.$store.commit('UPDATE_BLOG_TAG', null)
                this.$store.commit('UPDATE_BLOG', null)
                this.$router.push('/login')
            },
            async init() {
                if (this.user.id != null) {
                    let data = await getUserInfo(this.user.id);
                    this.avatarUrl = data.userInfo.avatarUrl
                }

            }
        }
    }
</script>
<style scoped>
    .login-btn {
        box-shadow: unset !important;
    }

    .avatar-popover {
        padding: 0;
    }

    .avatar-hover-ul {
        width: 135px;
        padding: 0;
        list-style: none;
        text-align: center;
    }

    .avatar-hover-ul li {
        margin: auto;
        font-size: 14px;
        height: 35px;
        line-height: 35px;
    }


    .dscn-toolbar {
        /*position: fixed;*/
        /*left: 0;*/
        /*right: 0;*/
        /*top: 0;*/
        width: 1200px;
        margin: 0 auto;
        height: 100%;
        z-index: 99;
        font-size: .75em;
        color: #333;
        line-height: 1.5em;
        background: #fff;
        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .05);
        min-width: 1200px;
        padding: 0;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
    }

    .blog-dropdown {
        text-align: center;
    }

    .dscn-container {
        width: 1180px;
        margin: auto;
    }

    .header-logo {
        color: black;
        float: left;
        margin-left: 10px;
        line-height: 64px;
        font-size: 24px;
        font-weight: bold;
        font-family: 隶书;

    }

    .header-logo-D {
        color: red;
    }

    .dscn-toolbar-list {
        height: 64px;
        padding: 0;
        float: left;
        display: inline-block;
        font-size: 14px;
        margin-left: 50px;
        text-align: center;
    }

    .dscn-toolbar-list li {
        text-align: center;
        display: inline-block;
        margin-left: 10px;
        width: 64px;
        height: 64px;
        line-height: 64px;
    }

    li:hover {
        background: rgb(240, 240, 245);
        text-align: center;
    }

    .search-div {
        float: right;
    }

    .input-search {
        margin-left: 0;
        margin-top: 15px;
    }

    .search-create-btn {
        margin-top: 15px;
        margin-left: 10px;
    }

    .icon-star {
        font-size: 18px;
        margin-left: 15px;
        color: darkgrey;
    }

    .icon-message {
        font-size: 18px;
        margin-left: 20px;
        color: darkgrey;
    }

    .avatar {
        float: right;
        margin-top: 10px;
        width: 40px;
        height: 40px;
        /*background: #2c3e50;*/
        margin-left: 15px;
        border-radius: 50%;
    }
</style>
